<template>
  <view class="dropDown">
    <u-dropdown ref="uDropdownRef" @open="openDropdown" @close="closeDropdown">
      <!-- 部门选择 -->
      <u-dropdown-item :title="departmentTitle">
        <view class="slot-content">
          <view class="up-text-center up-content-color up-m-t-20 up-m-b-20">
            <view class="u-page__tag-item" v-for="(dept, index) in departments" :key="index">
              <u-tag :text="dept.label" :plain="!dept.checked" type="primary" :name="index"
                     @click="toggleDepartment(index)">
              </u-tag>
            </view>
          </view>
        </view>
      </u-dropdown-item>
      <!-- 属性选择 -->
      <u-dropdown-item :title="attributeTitle" >
        <view class="slot-content">
          <view class="up-text-center up-content-color up-m-t-20 up-m-b-20">
            <view class="u-page__tag-item" v-for="(item, index) in attributes" :key="index">
              <u-tag :text="item.label" :plain="!item.checked" type="warning" :name="index"
                     @click="toggleAttribute(index)">
              </u-tag>
            </view>
          </view>
        </view>
      </u-dropdown-item>
      <!-- 时间选择 -->
      <u-dropdown-item :title="timeTitle" class="timeFont" >
        <view class="slot-content">
          <scroll-view scroll-y="true" style="height: 800rpx;">
              <u-calendar :show="showGzTime" mode="range" @confirm="gzConfirm"></u-calendar>
          </scroll-view>
        </view>
      </u-dropdown-item>
    </u-dropdown>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'; // 使用 Vuex 管理全局状态

export default {
  data() {
    return {
      showGzTime: false,
      departmentTitle: '部门', // 动态部门标题
      timeTitle: '时间', // 动态时间标题
      attributeTitle: '属性', // 动态属性标题
      departments: [
        { label: '部门1', checked: false },
        { label: '部门2', checked: false },
        { label: '部门3', checked: false },
        { label: '部门4', checked: false },
        { label: '部门5', checked: false },
        { label: '部门6', checked: false },
        { label: '部门7', checked: false },
        { label: '部门8', checked: false },
        { label: '部门9', checked: false },
      ],
      attributes: [
        { label: '属性1', checked: false },
        { label: '属性2', checked: false },
        { label: '属性3', checked: false },
      ],
    };
  },
  computed: {
    ...mapState(['selectedData']), // 从 Vuex 中获取全局选择的数据
  },
  mounted() {
    this.fetchDepartments(); // 组件挂载时获取部门数据
  },
  methods: {
    ...mapMutations(['setSelectedData']), // 使用 Vuex 的 mutation 来设置全局数据

    // 获取部门数据
    async fetchDepartments() {
      try {
        // 模拟异步获取部门数据
        setTimeout(() => {
          this.departments = [
            { label: '部门1', checked: false },
            { label: '部门2', checked: false },
            { label: '部门3', checked: false },
            { label: '部门4', checked: false },
            { label: '部门5', checked: false },
            { label: '部门6', checked: false },
            { label: '部门7', checked: false },
            { label: '部门8', checked: false },
            { label: '部门9', checked: false },
          ];
        }, 1000);
      } catch (error) {
        console.error('获取部门数据失败:', error);
      }
    },

    // 切换部门选择状态
    toggleDepartment(index) {
      this.departments[index].checked = !this.departments[index].checked;
      this.updateDepartmentTitle();
    },

    // 更新部门标题
    updateDepartmentTitle() {
      const selectedDepartments = this.departments
          .filter(dept => dept.checked)
          .map(dept => dept.label);

      if (selectedDepartments.length > 2) {
        // 如果选中的部门超过两个，只显示前两个并添加省略号
        this.departmentTitle = `${selectedDepartments.slice(0, 2).join(', ')}, ...`;
      } else if (selectedDepartments.length > 0) {
        // 如果选中的部门少于或等于两个，正常显示
        this.departmentTitle = selectedDepartments.join(', ');
      } else {
        // 如果没有选中任何部门，显示默认值 "部门"
        this.departmentTitle = '部门';
      }
    },

    // 切换属性选择状态
    toggleAttribute(index) {
      this.attributes[index].checked = !this.attributes[index].checked;
      this.updateAttributeTitle();
    },

    // 更新属性标题
    updateAttributeTitle() {
      const selectedAttributes = this.attributes.filter(attr => attr.checked).map(attr => attr.label);
      if (selectedAttributes.length > 2) {
        // 如果选中的部门超过两个，只显示前两个并添加省略号
        this.attributeTitle = `${selectedAttributes.slice(0, 2).join(', ')}, ...`;
      } else if (selectedAttributes.length > 0) {
        // 如果选中的部门少于或等于两个，正常显示
        this.attributeTitle = selectedAttributes.join(', ');
      } else {
        // 如果没有选中任何部门，显示默认值 "部门"
        this.attributeTitle = '属性';
      }
    },

    // 时间选择确认
    gzConfirm(e) {
      this.timeTitle = `${e[0]}...`; // 只显示起始时间
      this.$refs.uDropdownRef.close()
      this.showGzTime = false;
      // this.updateSelectedData();
    },

    // 更新全局选择的数据
    updateSelectedData() {
      const selectedData = {
        departments: this.departments.filter(dept => dept.checked).map(dept => dept.label),
        attributes: this.attributes.filter(attr => attr.checked).map(attr => attr.label),
        timeRange: this.timeTitle,
      };
      //this.setSelectedData(selectedData); // 更新 Vuex 中的全局数据
    },

    openDropdown() {
      this.showGzTime = true;
    },

    closeDropdown() {
      this.showGzTime = false;
    },
  },
};
</script>

<style>
.slot-content {
  background-color: #ffffff;
  padding: 24rpx;
}
.u-page__tag-item {
  margin-right: 20px;
  display: inline-block;
}
</style>
